<!--
 * @Author       : wfl
 * @LastEditors: fj
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-12-06 11:50:43
 * @LastEditTime: 2024-02-20 13:51:37
-->
<template>
  <div class="setting-panel-gui">
    <chartGenerateConfig
      v-if="config.generate.configType === GenerateType.基础"
      :config="config"
      chart-type="none"
    />
    <el-tabs
      v-else-if="config.generate.configType === GenerateType.全量"
      key="cardleft"
      tab-position="left"
      type="card"
    >
      <el-tab-pane label="标题" tab="title">
        <!-- <g-field :level="2" label="前缀">
          <g-input v-model="config.prefixStyle" />
        </g-field> -->
        <g-field :level="2" label="与左侧间距">
          <g-input-number v-model="config.textStyle.left" suffix="px" />
        </g-field>
        <g-field :level="2" label="标题样式">
          <GChartFontConfig :config="config.textStyle" />
        </g-field>
      </el-tab-pane>
      <el-tab-pane label="前缀" tab="prefixStyle">
        <g-field :level="2" label="前缀内容">
          <g-input v-model="config.prefixStyle.prefix" />
        </g-field>
        <g-field :level="2" label="前缀样式">
          <GChartFontConfig :config="config.prefixStyle" />
        </g-field>
      </el-tab-pane>
      <el-tab-pane label="数值" tab="num">
        <g-field :level="2" label="数值样式">
          <GChartFontConfig :config="config.numStyle" />
        </g-field>
        <g-field :level="2" label="展现形式">
          <n-radio-group
            v-model:value="config.numStyle.configType"
            size="small"
          >
            <n-radio-button value="all">通用</n-radio-button>
            <n-radio-button value="num">数值</n-radio-button>
            <n-radio-button value="percent">百分比</n-radio-button>
          </n-radio-group>
        </g-field>
        <g-field
          v-if="config.numStyle.configType === 'all'"
          :level="2"
          label="距离左侧间距"
        >
          <g-input-number
            v-model="config.numStyle.marginLeft"
            suffix="px"
            :min="0"
            :max="9999"
            :step="1"
          />
        </g-field>
        <g-field-collapse
          v-model="config.numStyle.suffix.show"
          toggle
          :level="2"
          label="数值后缀"
        >
          <g-field :level="2" label="后缀内容">
            <g-input v-model="config.default.unit" />
          </g-field>
          <g-field :level="2" label="后缀样式">
            <GChartFontConfig :config="config.numStyle.suffix" />
          </g-field>
        </g-field-collapse>
      </el-tab-pane>
      <el-tab-pane label="图形" tab="bar">
        <g-field :level="2" label="图形高度">
          <g-input-number
            v-model="config.barStyle.height"
            :min="1"
            suffix="px"
          />
        </g-field>
        <g-field :level="2" label="图形颜色">
          <g-color-picker v-model="config.barStyle.color" />
        </g-field>
        <g-field :level="2" label="背景色">
          <g-color-picker v-model="config.borderStyle.background" />
        </g-field>
        <g-field :level="2" label="图形边框">
          <g-input-number
            v-model="config.borderStyle.width"
            inline
            label="边框宽度"
            :min="0"
            suffix="px"
          />
          <g-select
            v-model="config.borderStyle.type"
            :data="lineStyles"
            inline
            label="边框类型"
          />
          <g-color-picker v-model="config.borderStyle.color" label="边框颜色" />
        </g-field>
        <g-field :level="2" label="圆角">
          <g-input-number
            v-model="config.barStyle.radius[0]"
            suffix="px"
            inline
            label="左上"
          />
          <g-input-number
            v-model="config.barStyle.radius[1]"
            suffix="px"
            inline
            label="右上"
          />
          <g-input-number
            v-model="config.barStyle.radius[2]"
            suffix="px"
            inline
            label="左下"
          />
          <g-input-number
            v-model="config.barStyle.radius[3]"
            suffix="px"
            inline
            label="右下"
          />
        </g-field>
      </el-tab-pane>
      <el-tab-pane label="分割块" tab="split">
        <g-field-collapse v-model="config.split.show" toggle label="分割块">
          <g-field :level="2" label="分割块形状">
            <g-select v-model="config.split.type" :data="typeList" />
          </g-field>
          <g-field :level="2" label="背景色" :is-flat="true">
            <g-color-picker v-model="config.split.background" />
          </g-field>
          <g-field :level="2" label="属性" :is-flat="true">
            <g-input-number
              v-model="config.split.width"
              :min="0"
              :max="1000"
              :step="1"
              suffix="px"
              inline="inline"
              label="宽度"
            />
            <!-- <g-input-number
              v-model="config.split.height"
              :min="0"
              :max="1000"
              :step="1"
              suffix="px"
              inline="inline"
              label="高度"
            /> -->
            <g-input-number
              v-model="config.split.rote"
              :min="0"
              :max="1000"
              :step="1"
              suffix="px"
              inline="inline"
              label="旋转角度"
            />
            <g-input-number
              v-model="config.split.split"
              :min="0"
              :max="1000"
              :step="1"
              suffix="px"
              inline="inline"
              label="间隔距离"
            />
          </g-field>
        </g-field-collapse>
      </el-tab-pane>
      <el-tab-pane label="轮播" tab="scroll">
        <GSwiperConfig :config="config.swiper" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang='ts'>
import { defineComponent, PropType, toRef } from "vue";
import { ElTabs, ElTabPane } from "element-plus";
import { RankBoard } from "./rank-board";
import { GlSplitTypes } from "@/data/select/select-options";

export default defineComponent({
  name: "VRankBoardProp",
  components: {
    ElTabs,
    ElTabPane,
  },
  props: {
    com: {
      type: Object as PropType<RankBoard>,
      required: true,
    },
  },
  setup(props) {
    const config = toRef(props.com, "config");
    // const handleAddSeriesItem = () => {
    //   return new BasicBarSeries(`系列${config.value.series.length + 1}`)
    // }

    return {
      config,
      // handleAddSeriesItem,
      fillTypes: GlFillTypes,
      // carouselTypes,
      fontFamilys: GlFontFamilys,
      fontWeights: GlFontWeights,
      lineStyles: GlLineStyles,
      backgroundSies: GlBackgroundSies,
      GenerateType: EGenerateType,
      typeList: GlSplitTypes,
    };
  },
});
</script>
